<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 250px;
            height: 200px;
            background-color: skyblue;
        }

        span {
            padding: 5px;
            display: inline-block;
            margin: 5px;
            color: white;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="hour"></span>
        <span>:</span>
        <span class="minute"></span>
        <span>:</span>
        <span class="second"></span>
    </div>
</body>
<script>
    // 獲取元素 註冊事件
    window.onload = function () {
        let hour = document.querySelector('.hour');
        let minute = document.querySelector('.minute');
        let second = document.querySelector('.second');
        var miao = 60;
        var fen = 10;
        var shi = 10;
        let daojishi = setInterval(function () {
            miao--;
            if (miao == 0) {
                miao = 60;
                fen--;
            }
            if (fen == 0) {
                shi--;
            }
            second.innerText = miao;
            minute.innerText = fen;
            hour.innerText = shi;
            if (shi == 0) {
                clearInterval(daojishi);
            }
        }, 1000);
    }

</script>

</html>